<template>
	<view class="invite_wrap" id="poster-content">
		<view class="invite_content">
			<!-- <view class="title">讣告</view>
			<view class="text">尊敬的各位亲友、同事和来宾：
			</view> -->
			<view class="text text2" v-html="info.InvitationRemarks">
			</view>
			<view class="ys_title">仪式主题：{{info.Ceremonytheme}}</view>
			<view class="ys_time">仪式时间：{{info.Ftime}}</view>
			<view class="ys_time">仪式地址：{{info.Address}}</view>
		</view>

		<!-- <view class="btn" @click="handleGenerate">
			生成海报
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		request,
		baseUrl
	} from '@/utils/request.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import html2canvas from 'html2canvas';

	const props = defineProps({
		config: {
			type: Object,
		},
		id: {
			type: String,
			default: 26
		}
	})

	const info = ref({})
	const btnflag = ref(true)


	const getInviteData = async (id) => {
		const res = await request({
			method: 'GET',
			url: '/SZ_CeremonyOrders/GetInvitation',
			data: {
				ID: id
			}
		})
		console.log('res', res)
		const result = res.Data[0];
		const stime = result.StartTime?.split(' ')
		const etime = result.EndTime?.split(' ')
		let ftime = ''
		if (stime[0] && etime[1]) {
			ftime = `${stime[0]} ${stime[1]}-${etime[1]}`
		}
		result.Ftime = ftime

		info.value = result

	}

	const downloadImage = (imageUrl) => {
		// #ifdef H5
		const link = document.createElement('a');
		link.href = imageUrl;
		link.download = 'poster.jpg'; // 设置下载文件名
		link.click();
		setTimeout(() => {
			props.config.handleclose && props.config.handleclose()
		}, 200)
		// #endif  
	}

	onLoad((opt) => {
		const {
			id
		} = opt;

		console.log('props.id', props.id)
		if (props.id) {
			console.log('props.id', props.id)
			getInviteData(+props.id)
		}

	})

	// watch(() => props.id, (newval) => {
	// 	console.log('newval', newval)
	// }, {
	// 	deep: true
	// })
	const handleGenerate = () => {

		// #ifdef H5
		const posterbox = document.querySelector('#poster-content');

		html2canvas(posterbox, {
			useCORS: true, // 允许跨域图片渲染
			scale: 2 // 增加图片分辨率
		}).then(canvas => {
			// 将 Canvas 转换为图片 URL
			const imageUrl = canvas.toDataURL('image/jpeg');


			//console.log('imageUrl', imageUrl)

			// 可以添加下载功能，用户点击下载图片
			downloadImage(imageUrl);
		}).catch(err => {
			console.log('html2canvas-error', err)
		})
		// #endif
	}
	defineExpose({
		handleGenerate
	})
</script>

<style lang="scss" scoped>
	.invite_wrap {
		width: 100%;
		height: 100vh;
		background: url('/static/img/invite_bg.png') center no-repeat;
		background-size: cover;

		.invite_content {
			padding: 60rpx 30rpx 0 30rpx;
			color: rgb(0, 127, 167);
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				padding: 60rpx 0 40rpx 0;
				text-align: center;
			}

			.text {
				text-indent: 20rpx;
				line-height: 56rpx;

				&.text2 {
					text-indent: 40rpx;
				}
			}

			.ys_title {
				padding: 40rpx 0 20rpx 0;
			}

			.ys_time {
				padding: 0 0 20rpx 0;
			}
		}

		.btn {
			width: 500rpx;
			height: 104rpx;
			margin: 40rpx auto;
			line-height: 104rpx;
			font-size: 28rpx;
			color: rgb(0, 127, 167);
			text-align: center;
			background-color: #fff;
			border-radius: 60rpx;
		}
	}

	.img-item {
		width: 100rpx;
		height: 300rpx;
	}
</style>